
import React from 'react';
import * as THREE from 'three';
import { Card, Form, InputNumber } from "antd";
import { useElement } from "tools/hooks/useElement";
import { useProperty } from 'tools/hooks/useProperty';


/**
 * 平面光<br/>
 * * 平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
 * * 不支持阴影。<br/>
 **/
export default function RectAreaLightCard() {

    const { element } = useElement();

    const light = React.useMemo<THREE.Light | undefined>(() => {
        if (!element) return undefined
        if (element.type === 'light') {
            return element.object3D as THREE.Light;
        }
    }, [element])

    const rectAreaLight = React.useMemo<THREE.RectAreaLight | undefined>(() => {
        if (light instanceof THREE.RectAreaLight) {
            return light
        } else {
            return undefined;
        }
    }, [light])

    const { setProperty } = useProperty(rectAreaLight)

    if (!rectAreaLight) return <></>;
    return (
        <Card title="平面光">
            <Form
                layout="horizontal"
                labelCol={{ span: 9 }}
                wrapperCol={{ span: 15 }}
            >
                <Form.Item label='宽度' tooltip='光源宽度' >
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        value={rectAreaLight.width}
                        onChange={setProperty('width')}
                    />
                </Form.Item>

                <Form.Item label='高度' tooltip='光源高度' >
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        value={rectAreaLight.height}
                        onChange={setProperty('height')}
                    />
                </Form.Item>
            </Form>
        </Card>
    )
}